import 'package:ele_progress/ele_progress.dart';
import 'package:ele_theme/ele_theme.dart';
import 'package:ele_theme/ele_theme_data.dart';
import 'package:flutter/material.dart';
import 'package:flutter_layout/main/base_stateful_widget.dart';
import 'package:get/get.dart';

import 'package:styled_widget/styled_widget.dart';

class ElementPage extends BaseStatefulWidget {
  const ElementPage({Key? key}) : super(key: key);

  @override
  _ElementPageState createState() => _ElementPageState();
}

//  属性
// progress：进度，值的范围：0-100。
// colors ：进度条的颜色，这是一个数组类型，设置一个颜色表示纯色，设置多个是渐变色。
// backgroundColor ：进度条的背景颜色。
// type：进度条样式，支持4种，分别为 line（直线）、circle（圆环）、dashboard（仪表盘）、liquid（水波纹）。
// strokeWidth ：进度条的宽度，默认是6， type=liquid 时不起作用。
// showText：是否显示进度文字，默认 true
// textInside ：进度文字是否显示在进度条内，默认 false，只在 type=line 和 liquid时可用。
// true：表示跟随进度条移动。
// false：type=line 而且direction=horizontal，文字显示在进度条右侧，其他情况文字显示在进度条中间。
// format：自定义显示进度文字。
// textStyle：进度文字字体样式。
// status ：控制进度条颜色，和theme配合使用的，主题中有primary、success、info、warning、danger 5种状态，对应5种颜色：primaryColor、successColor、infoColor、warningColor、dangerColor。但是此属性会被 colors 属性覆盖。
// direction ：进度条的方向，type=line和liquid时起作用。
// borderColor ：边框颜色，type=liquid时起作用。
// borderWidth：边框宽度，type=liquid时起作用。
// radius ：边框圆角，type=liquid时起作用

class _ElementPageState extends State<ElementPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          leading: BackButton(
            onPressed: () {
              Get.back();
            },
          ),
          centerTitle: true,
          title: Text( widget.runtimeType.toString()),
        ),
        body: EleTheme(
          data: EleThemeData(),
          child: Stack(
            children: [
              const EProgress(
                progress: 50,
                type: ProgressType.liquid,
                direction: Axis.vertical,
              ).width(30).height(140),
              const Padding(
                padding: EdgeInsets.only(top: 150),
                child: Demo(),
              ),
            ],
          ),
          // child: Demo(),
        ),
      ),
    );
  }
}

class Demo extends StatelessWidget {
  const Demo({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: ListView(
        children: [
          Column(
            children: [
              const SizedBox(
                height: 10,
              ),
              SizedBox(
                child: const EProgress(
                  progress: 50,
                  // strokeWidth: 10,
                  // showText: false,
                  // type: ProgressType.liquid,
                ),
                width: MediaQuery.of(context).size.width,
              ),
              const SizedBox(
                height: 20,
              ),
              SizedBox(
                child: EProgress(
                  format: (progress) {
                    return '自定义：$progress%';
                  },
                  progress: 50,
                  // strokeWidth: 10,
                  // showText: false,
                  // type: ProgressType.liquid,
                ),
                width: MediaQuery.of(context).size.width,
              ),
              const SizedBox(
                height: 20,
              ),
              SizedBox(
                child: EProgress(
                  status: EleThemeStatus.success,
                  format: (progress) {
                    return '自定义：$progress%';
                  },
                  progress: 50,
                  // strokeWidth: 10,
                  // showText: false,
                  // type: ProgressType.liquid,
                ),
                width: MediaQuery.of(context).size.width,
              ),
              const SizedBox(
                height: 20,
              ),
              Container(
                color: Colors.transparent,
                child: const EProgress(
                  progress: 50,
                  radius: 10,
                  // backgroundColor: Colors.transparent,
                  // strokeWidth: 10,
                  // showText: false,
                  type: ProgressType.liquid,
                ),
                width: MediaQuery.of(context).size.width / 4,
                height: 50,
              ),
              const SizedBox(
                height: 10,
              ),
              Container(
                color: Colors.transparent,
                child: const EProgress(
                  progress: 50,
                  // textInside: true,
                  // radius: 10,
                  // backgroundColor: Colors.transparent,
                  // strokeWidth: 10,
                  // showText: false,
                  type: ProgressType.liquid,
                ),
                width: MediaQuery.of(context).size.width / 4,
                height: 50,
              ),
              const SizedBox(
                height: 10,
              ),
              SizedBox(
                child: const EProgress(
                  progress: 50,
                  strokeWidth: 10,
                  // showText: false,
                  type: ProgressType.circle,
                ),
                width: MediaQuery.of(context).size.width / 4,
                height: MediaQuery.of(context).size.width / 4,
              ),
              const SizedBox(
                height: 10,
              ),
              SizedBox(
                child: const EProgress(
                  progress: 50,
                  strokeWidth: 10,
                  // showText: false,
                  type: ProgressType.dashboard,
                ),
                width: MediaQuery.of(context).size.width / 4,
                height: MediaQuery.of(context).size.width / 4,
              ),
              const Text("\nprogress 表示进度，值的范围：0-100。\n进度条支持4种形状，分别为：line（直线）、circle（圆环）、dashboard（仪表盘）、liquid（水波纹）。"),
              const SizedBox(
                height: 20,
              ),
              const EProgress(
                progress: 50,
                // strokeWidth: 10,
                // showText: false,
                type: ProgressType.liquid,
              ),
              SizedBox(
                child: const EProgress(
                  progress: 80,
                  strokeWidth: 20,
                  colors: [
                    Colors.blue,
                    Colors.red,
                    Colors.green,
                  ],
                ),
                width: MediaQuery.of(context).size.width,
              )
            ],
          ),
          const SizedBox(height: 20),
          Container(
            color: Colors.transparent,
            child: const EProgress(
              progress: 100,
              strokeWidth: 50,
              direction: Axis.vertical,
            ),
            height: MediaQuery.of(context).size.width / 4,
            width: 50,
          ),
          const SizedBox(height: 20),
          Container(
            color: Colors.transparent,
            child: const EProgress(
              progress: 50,
              type: ProgressType.liquid,
              borderColor: Colors.red,
              borderWidth: 5,
              radius: 60,
            ),
            height: 50,
            // width: 50,
          ),
        ],
      ),
    );
  }
}
